<template>
  <view>
    <!-- 自定义搜索组件-->
  <my-search @click='gotoSearch'></my-search>
  <!-- /自定义搜索组件-->
    <view class="scroll-view-container">
      <!-- 左侧滚动区域-->
      <scroll-view class="left-scroll-view" scroll-y :style="{height:wh+'px'}">
        <block v-for="(item,i) in cateList" :key="item.cat_id">
          <view 
          :class="['left-scroll-view-item',i===active ? 'active': '']"
          @click="activeChanged(i)"
          >{{item.cat_name}}</view>
        </block>
      </scroll-view>
      <!-- /左侧滚动区域-->
      <!-- 右侧滚动区域-->
      <scroll-view class="right-scroll-view" scroll-y :style="{height:wh+'px'}" :scroll-top="scrollTop">
        <!-- 二级菜单-->
        <view class="cate-lv2" v-for="(item2,i2) in cateLevel2" :key="item2.cat_id">
          <view class="cate-lv2-title">{{item2.cat_name}}</view>
          <!-- 三级菜单-->
          <view class="cate-lv3-list">
            <!-- 菜单项-->
            <view class="cate-lv3-item" v-for="(item3,i3) in item2.children" :key="item3.cat_id" @click="gotoGoodsList(item3)">
              <!-- 图片-->
              <image :src="item3.cat_icon" mode=""></image>
              <!-- 文字-->
              <text>{{item3.cat_name}}</text>
            </view>
          </view>
          <!-- /三级菜单-->
        </view>
        <!-- /二级菜单-->
      </scroll-view>
      <!-- /右侧滚动区域-->
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        wh:0,//屏幕可用长度
        cateList:[],//分类列表数据
        active: 0,//左侧选中项索引
        cateLevel2:[],//二级分类数据
        scrollTop:0//右侧菜单滚动条状态控制
      };
    },
    onLoad() {
      //获取当前系统信息
     const sysinfo= uni.getSystemInfoSync()
      // console.log(sysinfo);
      this.wh=sysinfo.windowHeight-50
      //调用获取分类列表数据的网络请求
      this.getcateList()
    },
    methods:{
      //获取分类信息
     async getcateList(){
      const { data }= await uni.$http.get('/categories')
      console.log(data);
      if(data.meta.status!==200) return uni.$showMsg()
      this.cateList=data.message
      //为二级列表赋值
      this.cateLevel2=this.cateList[0].children
      },
      //为点击项添加高亮选中样式
      activeChanged(i){
        this.active=i
        //根据选中项更改二级列表的数据
        this.cateLevel2=this.cateList[i].children
        //点击左侧菜单项重置滚动条位置
        this.scrollTop=this.scrollTop===0? 1 : 0
      },
      //三级菜单项跳转到对应的商品列表
      gotoGoodsList(item){
        uni.navigateTo({
          url:'/subpkg/goods_list/goods_list?cid='+item.cat_id
        })
      },
      //跳转到搜索页面
      gotoSearch(){
        uni.navigateTo({
          url:'/subpkg/search/search'
        })
      }
    }
  }
</script>

<style lang="scss">
.scroll-view-container{
  display: flex;
  .left-scroll-view{
    width: 120px;
    .left-scroll-view-item{
      line-height: 60px;
      background-color: #f7f7f7;
      text-align: center;
      font-size: 12px;
      position: relative;
      &.active {
        background-color: #ffffff;
       // 渲染激活项左侧的红色指示边线
               &::before {
                 content: ' ';
                 display: block;
                 width: 3px;
                 height: 30px;
                 background-color: #c00000;
                 position: absolute;
                 left: 0;
                 top: 50%;
                 transform: translateY(-50%);
               }
      }
    }
  };
    .cate-lv2-title{
      font-style: 12px;
      font-weight: bold;
      text-align: center;
      padding: 15px 0;
    };
    .cate-lv3-list{
      display: flex;
      flex-wrap: wrap;
      .cate-lv3-item{
        width: 33.33%;
        margin-bottom: 10px;
        display: flex;
        flex-direction:column;
        align-items: center;
        image{
          width: 60px;
          height: 60px;
        };
        text{
          font-size: 12px
        }
      }
    }
}
</style>
